<template>
  <div class="major-events hideScrollBar">
    <!-- 导航 -->
    <NavBar :title="t('airdrop.recordTitle')" isFixed />
    <div class="contentview">
      <div
        v-if="!pageData.loading && pageData.list.length === 0"
        class="contentview-notdata items-center"
      >
        <Images
          class="contentview-notdata-img"
          src="/image/mvp/coin/major-events-nodata.svg"
        ></Images>
        <div class="contentview-notdata-desc">{{ t("mvp.other.zwnr") }}</div>
      </div>
      <ClientOnly v-else>
        <van-list
          v-model:loading="pageData.loading"
          :finished="pageData.finished"
          :finished-text="t('mvp.other.text4')"
          :loading-text="t('mvp.other.text11')"
          @load="onLoadList"
        >
          <div
            class="list"
            v-for="(item, index) in pageData.list"
            :key="item.id"
          >
            <!-- 左边 -->
            <div class="list-left">
              <img
                class="list-left-icon"
                src="/image/airdrop/record-icon.svg"
              />
              <div class="list-left-info">
                <div class="list-left-bdc">{{ item.sendAmount }} BDC</div>
                <div class="list-left-time">{{ item.sendTime }}</div>
              </div>
            </div>
            <!-- 右边 -->
            <div class="list-right">{{ item.bonusRate }}X</div>
          </div>
        </van-list>
      </ClientOnly>
    </div>
  </div>
</template>
<script setup name="record">
import { useDateFormat } from "@vueuse/core";
import { queryAirdropActivityInfo } from "../../api/airdrop";

const { t } = useI18n();

// 页面属性
const pageData = reactive({
  loading: false,
  finished: false,
  list: [],
  total: 0,
});

// 上啦加载
const onLoadList = () => {
  // pageData.pageNum += 1;
  getListDataRequest((isAdd) => {
    // if (!isAdd) {
    //   pageData.pageNum -= 1;
    // }
  });
};

// 获取列表数据
const getListDataRequest = async (call) => {
  pageData.loading = true;
  const res = await queryAirdropActivityInfo({
    pageNum: 1,
    pageSize: 900,
  });

  pageData.loading = false;
  if (res) {
    let majorList = [];
    // console.log("--获取列表数据--", res);
    majorList = res.records.map((e, index) => {
      e.sendTime = useDateFormat(
        Number(e.sendTime),
        "YYYY-MM-DD HH:mm:ss"
      ).value;
      return e;
    });

    pageData.list = pageData.list.concat(majorList);

    pageData.total = res.total || 0;
    if (pageData.list.length >= res.total || 0) {
      pageData.finished = true;
    }
    if (res.records && res.records.length > 0) {
      call && call(true);
    } else {
      call && call(false);
    }
  }
};

onMounted(() => {
  getListDataRequest();
});
</script>
<style lang="scss" scoped>
.major-events {
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  .contentview {
    &-notdata {
      justify-content: center;
      flex-direction: column;
      position: relative;
      top: 120 * 2px;
      &-img {
        width: 120 * 2px;
        height: 110 * 2px;
        margin-bottom: 5px;
      }
      &-desc {
        color: #999da7;
        font-size: 13 * 2px;
      }
    }
  }
  .list {
    display: flex;
    margin: 0 15 * 2px;
    padding: 15 * 2px 0;
    justify-content: space-between;
    border-bottom: 1px solid #f5f5f5;

    &-left {
      display: flex;
      &-icon {
        width: 16 * 2px;
        height: 16 * 2px;
      }
      &-info {
        margin-left: 8 * 2px;
      }
      &-bdc {
        color: #141924;
        font-size: 13 * 2px;
        font-weight: 590;
        margin-bottom: 10 * 2px;
      }
      &-time {
        color: #999da7;
        font-size: 13 * 2px;
      }
    }
    &-right {
      color: #141924;
      font-size: 13 * 2px;
      font-weight: 590;
    }
  }
}
</style>
